import { getUser, getUserProfile } from "@/store/actions/profile";
import styles from "./index.module.scss";
import { Grid, Avatar, Tag, NoticeBar, FloatingBubble, Toast } from "antd-mobile";
import { BellOutline, StarOutline, VideoOutline, ScanningOutline, RightOutline, MessageFill, EditFill } from "antd-mobile-icons";
import Icon from "@/components/Icon";
import useInitialState from "@/utils/use-initial-state";
import { useHistory } from "react-router-dom";
const scrollContent: string = "人生若只如初见，何事秋风悲画扇。等闲变却故人心，却道故人心易变。骊山语罢清宵半，泪雨霖铃终不怨。何如薄幸锦衣郎，比翼连枝当日愿。";

export default function ProfileIndex() {
  const profile = useInitialState(getUser, "profile");
  const { userProfile } = useInitialState(getUserProfile, "profile");

  const history = useHistory();
  // 点击前往人工客服
  const onClick = () => {
    Toast.show({
      icon: "success",
      content: "工号9527为您服务",
      duration: 2000,
    });
    history.push("/profile/chat");
  };

  return (
    <div className={styles.root}>
      <div className="top">
        <Grid className="top-icon" columns={10}>
          <Grid.Item span={6}></Grid.Item>
          <Grid.Item span={1}>
            <StarOutline />
          </Grid.Item>
          <Grid.Item span={1}>
            <VideoOutline />
          </Grid.Item>
          <Grid.Item span={1}>
            <ScanningOutline />
          </Grid.Item>
          <Grid.Item span={1}>
            <BellOutline />
          </Grid.Item>
        </Grid>
        <Grid className="top-user" columns={14}>
          <Grid.Item span={4}>
            <Avatar
              src={profile.photo}
              style={{
                "--size": "80px",
                "--border-radius": "40px",
                display: "inline-block",
                margin: "10px",
              }}
            />
          </Grid.Item>
          <Grid.Item className="name" span={8}>
            <p>{profile.name}</p>
            <Tag color="primary" fill="outline">
              正式会员
            </Tag>
            <div className="vip-icon">
              <Icon type="icon-vip"></Icon>
              <Icon type="icon-VIP"></Icon>
              <Icon type="icon-VIP1"></Icon>
              <Icon type="icon-vip2"></Icon>
            </div>
            <br />
            简介： <span>{userProfile.intro}</span>
          </Grid.Item>
          <Grid.Item
            style={{
              lineHeight: "80px",
            }}
            span={2}
          >
            空间 <RightOutline />
          </Grid.Item>
        </Grid>
        <Grid className="top-bottom" columns={18}>
          <Grid.Item span={6}>
            <Icon type="icon-yiguanzhu"></Icon>
            <br />
            <span>关注</span>
            <br />
            <span>{profile.follow_count}</span>
          </Grid.Item>
          <Grid.Item
            style={{
              borderRight: "1px solid #fff",
              borderLeft: "1px solid #fff",
            }}
            span={6}
          >
            <Icon type="icon-fensiguanli"></Icon>
            <br />
            <span>粉丝</span>
            <br />
            <span>{profile.fans_count}</span>
          </Grid.Item>
          <Grid.Item span={6}>
            <Icon type="icon-dianzan_kuai"></Icon>
            <br />
            <span>点赞</span>
            <br />
            <span>{profile.like_count}</span>
          </Grid.Item>
        </Grid>
      </div>
      <div className="middle">
        <Grid className="top-bottom" columns={1}>
          <Grid.Item>
            <NoticeBar content={scrollContent} color="alert" />
          </Grid.Item>
        </Grid>
        <Grid className="top-bottom" columns={18}>
          <Grid.Item
            span={6}
            onClick={() => {
              history.push("/profile/edit");
            }}
          >
            <EditFill />
            <p
              style={{
                color: "black",
                fontSize: "12px",
              }}
            >
              编辑资料
            </p>
          </Grid.Item>
          <Grid.Item
            style={{
              borderRight: "1px solid #fff",
              borderLeft: "1px solid #fff",
            }}
            span={6}
          >
            <Icon type="icon-fensiguanli"></Icon>
            <br />
            <span>粉丝</span>
            <br />
            <span>{profile.fans_count}</span>
          </Grid.Item>
          <Grid.Item span={6}>
            <Icon type="icon-dianzan_kuai"></Icon>
            <br />
            <span>点赞</span>
            <br />
            <span>{profile.like_count}</span>
          </Grid.Item>
        </Grid>
        <Grid className="top-bottom" columns={18}>
          <Grid.Item span={6}>
            <Icon type="icon-yiguanzhu"></Icon>
            <br />
            <span>关注</span>
            <br />
            <span>{profile.follow_count}</span>
          </Grid.Item>
          <Grid.Item
            style={{
              borderRight: "1px solid #fff",
              borderLeft: "1px solid #fff",
            }}
            span={6}
          >
            <Icon type="icon-fensiguanli"></Icon>
            <br />
            <span>粉丝</span>
            <br />
            <span>{profile.fans_count}</span>
          </Grid.Item>
          <Grid.Item span={6}>
            <Icon type="icon-dianzan_kuai"></Icon>
            <br />
            <span>点赞</span>
            <br />
            <span>{profile.like_count}</span>
          </Grid.Item>
        </Grid>
      </div>
      <FloatingBubble
        style={{
          "--initial-position-bottom": "55px",
          "--initial-position-right": "30px",
          "--edge-distance": "30px",
          "--z-index": "9",
        }}
        onClick={onClick}
      >
        <MessageFill fontSize={32} />
      </FloatingBubble>
    </div>
  );
}
